<template>
  <div class="detail">
    <div class="left" @click="backClick">
      <img src="../../../asset/back.svg" alt="" />
    </div>

    <div class="center">
      <div
        v-for="(item, index) in titles"
        :key="item"
        class="tit"
        :class="{ active: index === currentIndex }"
        @click="titClick(index)"
      >
        {{ item }}
      </div>
    </div>

    <div class="right"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0
    }
  },
  methods: {
    titClick(index) {
      this.currentIndex = index
    },
    backClick() {
      this.$router.back()
    }
  },
  props: ['titles']
}
</script>

<style scoped>
.detail {
  height: 44px;
  line-height: 44px;
  display: flex;
  text-align: center;
  font-size: 13px;
}
.left,
.right {
  flex: 1;
}
.left img {
  margin-top: 10px;
}

.center {
  flex: 6;
  display: flex;
}

.center div {
  flex: 1;
}
.active {
  color: orange;
}
</style>
